<template>
  <div class="home">
    <!-- 首页分类头部 -->
    <van-tabs>
      <van-tab
       v-for="category in categories"
       :key="category.id"
       :title="category.name">
      </van-tab>
    </van-tabs>
    <!-- 轮播图 -->
    <template>
     <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
      v-for="banner in banners"
      :key="banner.id"
      >
      <img v-lazy="banner.picUrl" width="100%" height="100%"/>
      </van-swipe-item>
    </van-swipe>
     </div>
     <!-- 标志 -->
      <van-grid direction="horizontal" :column-num="3">
        <van-grid-item
         v-for="policydesclist in policydesclists"
         :key="policydesclist.id"
         :icon="policydesclist.icon" :text="policydesclist.desc" />
      </van-grid>
      <!-- 推荐 -->
      <div class="recommend">
      <van-grid :column-num="5">
        <van-grid-item
         v-for= "kingkonglist in kingkonglists"
         :key= "kingkonglist.text"
         :icon= "kingkonglist.picUrl"
         :text= "kingkonglist.text"
         />
      </van-grid>
      </div>
      <div class="push">
        <div class="top">
          <ul class="frist">
            <li class="tap"
             v-for="tap in Taps"
             :key="tap.id"
             >
              <h5 class="title">{{tap.title}}</h5>
              <div class="discript">
                 <span class="sp-tips">{{tap.subTitle}}</span>
                 <p></p>
              </div>
              <img :src="tap.picUrl" class="pic">
            </li>
          </ul>
        </div>
        <div class="gifs">
          <img v-lazy="gif.picUrl" width="100%" height="100%" />
        </div>
        <div class="Rush-to-buy">
          <ul class="rush">
            <li class="buy" v-for="rushbuy in rushbuys" :key="rushbuy.id">
              <img :src="rushbuy.picUrl">
              </li>
          </ul>
        </div>
        <div class="advert">
          <img :src="Vert.picUrl">
        </div>
      </div>
      <div class="newcomers">
        <van-divider
          :style="{ color: 'black', borderColor: 'black', padding: '0 125px' }"
          >
          新人专享礼
          </van-divider>
          <div class="content">
            <div class="left">
              <div class="name">新人专享礼包</div>
              <div class="imgWrap">
                <div class="tm-lazyload">
                  <img src="https://yanxuan.nosdn.127.net/352b0ea9b2d058094956efde167ef852.png">
                </div>
                <div class="animate"></div>
              </div>
            </div>
            <div class="right">
              <ul class="discount">
                <li>
                  <div class="m-activityItem">
                    <div class="picWrap">
                      <div class="tm-lazyload">
                        <img v-lazy="">
                      </div>
                      <div class="discount">
                        <div class="line1"></div>
                        <div class="line2"></div>
                      </div>
                    </div>
                    <div class="cnt">
                      <div class="title">122</div>
                      <div class="subtitle"></div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
      </div>
    </template>
  </div>
</template>

<script>
import { getCategories, getBanners, getPolicyDescLists, getkingKongLists, getTaps, getActivityModules } from '@/api/home'
export default {
  name: 'Home',
  data() {
    return {
      categories: [],
      banners: [],
      policydesclists: [],
      kingkonglists: [],
      Taps: [],
      gif: {},
      rushbuys: [],
      Vert: {},
      categorsd: {
        id: 16546,
        name: '推荐',
      },
      ActivityModules: [],
    }
  },
  created() {
    getCategories()
      .then(data => {
        this.categories = data.cateList
        this.categories.unshift(this.categorsd)
      })
    getBanners()
      .then(data => {
        this.banners = data.data.focusList
      })
    getPolicyDescLists()
      .then(data => {
        this.policydesclists = data.data.policyDescList
      })
    getkingKongLists()
      .then(data => {
        this.kingkonglists = data.data.kingKongModule.kingKongList
      })
    getTaps()
      .then(data => {
        this.Taps = data.data.bigPromotionModule.floorList[0].cells
      })
    getTaps()
      .then(data => {
        this.gif = data.data.bigPromotionModule.floorList[1].cells[0]
      })
    getTaps()
      .then(data => {
        this.rushbuys = data.data.bigPromotionModule.floorList[2].cells
        console.log(this.rushbuys)
      })
    getTaps()
      .then(data => {
        this.Vert = data.data.bigPromotionModule.floorList[3].cells[0]
        console.log(this.Vert)
      })
    getActivityModules()
      .then(data => {

      })
  },

}
</script>
<style lang="less" scoped>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
  }
  .banner{
    width: 100%;
    height: 185px;
    overflow: hidden;
  }
  /deep/.van-swipe__indicator{
    width: 20px;
    height: 2px;
  }
  /deep/.van-grid{
    width: 100%;
    height: 36px;
    .van-grid-item{
      height: 36px;
      .item{
        height: 20px;
      }
    }
  }
  /deep/.van-grid-item__icon{
    font-size: 16px;
  }
  /deep/.van-grid-item__content{
    padding: 14px 5px;
  }
  /deep/.recommend{
    height: 200px;
    .van-grid-item{
       height: 100px;
      .van-icon__image{
      font-size: 50px;
    }
    }
  }
  .push{
    width: 100%;
    min-height: 300px;
    background-color: #ededed;
    .top{
      width: 100%;
      overflow: hidden;
      .frist{
      width: 95%;
      height: 115px;
      // background-color: #fff;
      margin-left: 5px;
      margin-top: 10px;
      display: flex;
      .tap{
        position: relative;
        margin-left: 5px;
        .title{
          font-size: 16px;
          position: absolute;
          z-index: 3;
          top:-25px;
          left: 30px;
        }
        .discript{
          position: relative;
          p{
            display: inline-block;
            width: 90px;
            height: 14px;
          }
           .sp-tips{
          font-size: 12px;
          position: relative;
          z-index: 3;
          top:-20px;
          left: 30px;
          color: rgb(128, 55, 211);
        }
        }
        .pic{
          width: 176px;
          height: 115px;
          position: absolute;
          top: 0;
          left:0;
          z-index: 2;
        }
      }
    }
    }
    .gifs{
      width: 100%;
      height: 173px;
      background-color: black;
      img{
        width: 99%;
        margin-left: 1%;
      }
    }
    .Rush-to-buy{
      width: 100%;
      height: 93px;
      .rush{
        width: 100%;
        height: 100%;
        display: flex;
        margin-left: 5px;
        .buy{
          margin-left: 5px;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .advert{
      width: 100%;
      height: 60px;
       padding-bottom: 10px;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .newcomers{
    width: 100%;
    height: 280px;
    background-color: #fff;
    .content{
      width: 97%;
      height: 220px;
      padding-left: 12px;
      .left{
        display: block;
        width: 172px;
        height: 217px;
        background-color: #f9e9cf;
        border-radius: 5px;
        margin-right: 5px;
        float: left;
        .name{
          font-family: PingFangSC-Medium;
          font-size: 16px;
          padding: 12px 0 0 12px;
        }
        .imgWrap{
          margin: 14px auto;
          width: 129px;
          height: 129px;
          position: relative;
          .tm-lazyload{
            width: 129px;
            height: 129px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .animate{
            position: absolute;
            width: 12px;
            height: 8px;
            bottom: 10px;
            right: 35px;
            background: url(https://yanxuan.nosdn.127.net/3f7e731c6650bc1770589c78bd5a18b7.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
</style>
